<template>
<div>
    <city-header></city-header>
    <city-search :cities= 'cities'></city-search>
    <city-list :hotCities= 'hotCities' :cities= 'cities' :letter= 'letter'></city-list>
    <city-alphabet :cities= 'cities' @letterChange= 'handleLetterChange'></city-alphabet>
    <!-- <city-alphabet></city-alphabet>要放在最下面 -->
</div>
</template>
<script>
import CityHeader from './components/city-header'
import CitySearch from './components/city-search'
import CityList from './components/city-list'
import CityAlphabet from './components/city-alphabet'
import axios from 'axios'
export default {
    name: 'City',
    components: {
        CityHeader,
        CitySearch,
        CityList,
        CityAlphabet
    },
    data() {
        return {
            hotCities: [],
            cities: null,
            letter: ''
        }
    },
    methods: {
        getCityInfo() {
            axios.get('/api/city.json')
                .then(this.getCityInfoSucc)
        },
        getCityInfoSucc(res) {
            res = res.data
            if (res.ret && res.data) {
                this.hotCities = res.data.hotCities
                this.cities = res.data.cities
            }
        },
        //alphabe组件this.$emit('letterChange', e.target.innerText)
        handleLetterChange(alphabetText) {
            this.letter = alphabetText
        }
    },
    mounted() {
        this.getCityInfo()
    }
}
</script>
<style lang="stylus">

</style>
